<style>
	.goods-eq {
		padding: 10px;
	}
	
	.goodeqstree-header {
		height: 35px;
		background: #EEEEEE;
		border-right: 1px solid #eee;
	}
	
	.goodeqstree-header span {
		line-height: 35px;
		margin-left: 10px;
		font-family: inherit;
		font-size: 14px;
		color: #1c2438;
		font-weight: 700;
	}
	
	.goodseq-tree {
		padding: 10px;
		height: 700px;
		border: 1px solid #eee;
	}
	
	.goodseq-tree .ivu-tree .ivu-tree-title {
		font-size: 14px;
	}
	
	.goodseq-tree .ivu-tree .ivu-tree-arrow {
		font-size: 14px;
	}
	
	.goodseq-right-context-header {
		height: 140px;
	}
	
	.goodseq-right-context-header {
		border: 1px solid #eee;
		width: 1344px;
	}
	
	.goodeg-info {
		padding-top: 10px;
	}
	
	.goodseq-right-context-table {
		margin-top: 10px;
	}
	
	.table-page {
		margin-top: 6px;
	}
	
	.modal-context {
		padding: 10px 20px;
	}
	
	.modal-context .ivu-col-span-12 {
		margin-top: 15px;
	}
</style>
<template>
	<div class="goods-eq">
		<Row :gutter="15">
			<Col span="4">
			<div class="goodeqstree-header">
				<span>{{goodEqPageLabal[0].fcn}}</span>
			</div>
			<div class="goodseq-tree">
				<Tree :data="baseData" @on-select-change="choseGoodsType"></Tree>
			</div>
			</Col>
			<Col span="20">
			<div class="goodseq-right-context">
				<div class="goodseq-right-context-header">
					<div class="goodeg-type">
						<Button v-for="(item,index) in types" @click="getGoodsInfoByType(item)">{{item.fmodel}}</Button>
					</div>
					<div class="goodeg-info">
						<Col span="3">
						<img src="../../common/images/401.gif" height="40px" width="100px" />
						</Col>
						<Col>
						<p>
							<span style="margin-left: 15px;">{{goodEqPageLabal[1].fcn}}对讲机</span>
							<span style="margin-left: 58px;">{{goodEqPageLabal[2].fcn}}BD300对讲机</span>
						</p>
						<p style="margin-top: 10px;">
							<span style="margin-left: 15px;">{{goodEqPageLabal[3].fcn}}2017-1-15</span>
							<span style="margin-left: 15px;">{{goodEqPageLabal[4].fcn}}2016-16-2</span>
						</p>
						</Col>
					</div>
				</div>
				<div class="goodseq-right-context-table">
					<Button type="primary" @click="addGoodType=true">新增</Button>
					<Button type="primary">修改</Button>
					<Button type="error" @click="deleteGoods">删除</Button>
					<tablePage :list="lists" v-on:goto="goto" class="table-page"></tablePage>
					<Table :columns="columns1" :data="items" style="margin-top: 10px;" @on-selection-change="getGoodId" @on-select-all='getGoodIds'></Table>
					<Page :total="lists.totalsize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size="pageSize" show-total class="table-page"></Page>
				</div>
			</div>
			</Col>
		</Row>
		<Modal v-model="addGoodType" width="600" :mask-closable="false">
			<p slot="header">
				<span>{{goodsModalLebal[0].fcn}}</span>
			</p>
			<div style="margin-bottom: 20px;">
				<Row>
					<div class="modal-context">
						<Col span="12">
						<span>{{goodsModalLebal[1].fcn}}</span>
						<Input disabled style="width: 75%;  margin-left: 10px" v-model="MgoodsType"></Input>
						</Col>
						<Col span="12">
						<span>{{goodsModalLebal[2].fcn}}</span>
						<Input disabled style="width: 75%; margin-left: 10px;" v-model="MgoodsModel"></Input>
						</Col>
						<Col span="12">
						<span>{{goodsModalLebal[3].fcn}}</span>
						<Input style="width: 75%; margin-left: 10px;" v-model="MgoodsDep"></Input>
						</Col>
						<Col span="12">
						<span>{{goodsModalLebal[4].fcn}}</span>
						<Input style="width: 75%; margin-left: 10px;" v-model="MgoodsName"></Input>
						</Col>
						<Col span="12">
						<span>{{goodsModalLebal[5].fcn}}</span>
						<Input style="width: 75%; margin-left: 10px;" v-model="MgoodsNo"></Input>
						</Col>
						<Col span="12">
						<span>{{goodsModalLebal[6].fcn}}</span>
						<Select placeholder="请选择" style="width: 75%; margin-left: 10px;" v-model="MgoodsCondition">
							<Option value="beijing">北京市</Option>
							<Option value="shanghai">上海市</Option>
							<Option value="shenzhen">深圳市</Option>
						</Select>
						</Col>
						<Col span="12">
						<span>{{goodsModalLebal[7].fcn}}</span>
						<Select placeholder="请选择" style="width: 75%; margin-left: 10px;" v-model="MgoodsLocal">
							<Option value="beijing">北京市</Option>
							<Option value="shanghai">上海市</Option>
							<Option value="shenzhen">深圳市</Option>
						</Select>
						</Col>
						<Col span="12">
						<span>{{goodsModalLebal[8].fcn}}</span>
						<Select placeholder="请选择" style="width: 75%; margin-left: 10px;" v-model="MgoodsState">
							<Option value="beijing">北京市</Option>
							<Option value="shanghai">上海市</Option>
							<Option value="shenzhen">深圳市</Option>
						</Select>
						</Col>
						<Col span="12">
						<span>{{goodsModalLebal[9].fcn}}</span>
						<Input placeholder="请输入" style="width: 75%; margin-left: 10px;" v-model="MgoodsUser"></Input>
						</Col>
					</div>
				</Row>
			</div>
			<div slot="footer">
				<Button type="primary">取消</Button>
				<Button type="primary" @click="addGoods">保存</Button>
				<Button type="primary">继续新增</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import tablePage from '../../components/tablePage.vue';
	export default {
		components: {
			tablePage,
		},
		data() {
			return {
				//goodsModal val
				MgoodsType: '',
				MgoodsModel: '',
				MgoodsDep: '',
				MgoodsName: '',
				MgoodsNo: '',
				MgoodsCondition: '',
				MgoodsLocal: '',
				MgoodsState: '',
				MgoodsTypeId:'',
				MgoodsUser:'',

				//goodsModalLebal
				goodsModalLebal: [{
					fcn: '物资新增'
				}, {
					fcn: '物资类型'
				}, {
					fcn: '物资型号'
				}, {
					fcn: '隶属单位'
				}, {
					fcn: '物资名称'
				}, {
					fcn: '物资编号'
				}, {
					fcn: '技术状况'
				}, {
					fcn: '存放位置'
				}, {
					fcn: '在位状态'
				}, {
					fcn: '使用人'
				}],
				// addGoodType   modal
				addGoodType: false,
				//型号
				goodsId: [],
				goodsTypeId: '',
				types: [],
				pageSize: 2,
				//table page  child component
				lists: [{
					totalsize: 50,
					current: 1,
					allpage: 13
				}],
				//goodEqPageLabal
				goodEqPageLabal: [{
					fcn: '物资类型'
				}, {
					fcn: '类别：'
				}, {
					fcn: '物资信号：'
				}, {
					fcn: '出厂日期：'
				}, {
					fcn: '配发日期：'
				}],
				baseData: [],
				columns1: [{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: '序号',
						key: 'fid'
					},
					{
						title: '物资类别',
						key: 'fgoodstypeid'
					},
					{
						title: '物资编号',
						key: 'fno'
					},
					{
						title: '技术状况',
						key: 'fcondition'
					},
					{
						title: '存放位置',
						key: 'flocation'
					},
					{
						title: '在位状态',
						key: 'finstate'
					},
					{
						title: '使用单位',
						key: 'fdepno'
					},
					{
						title: '使用人',
						key: 'fuserno'
					}
				],
				items: [{
						name: '王小明',
						age: 18,
						address: '北京市朝阳区芍药居'
					},
					{
						name: '张小刚',
						age: 25,
						address: '北京市海淀区西二旗'
					},
					{
						name: '李小红',
						age: 30,
						address: '上海市浦东新区世纪大道'
					},
					{
						name: '周小伟',
						age: 26,
						address: '深圳市南山区深南大道'
					}
				],
			}
		},
		methods: {
			//分页请求ajax  table page  child component
			goto: function(index) {
				console.info('parent' + index)
			},
			//物资类型树
			getGoodsType() {
				this.$http.get(this.url + 'Goods/select/Type').then(response => {
					let isOk = response.data;
					//console.info(isOk.obj)
					if(isOk.success) {
						console.log(isOk.obj)
						this.getGoodsTreeList(isOk.obj)
					} else {
						this.$Message.error(isOk.msg);
					}

				}, response => {

				});
			},
			//整理后台数据
			getGoodsTreeList: function(datas) {
				this.baseData = [];
				for(var i = 0; i < datas.length; i++) {
					this.baseData.push(this.getGoodsTreeChilds(datas, datas[i]));
				}
				console.log(this.baseData)
			},
			getGoodsTreeChilds: function(datas, data) {
				var obj = new Object;
				obj.title = data.fname;
				obj.fid = parseInt(data.fid);
				obj.fpid = parseInt(data.fpid);

				obj.children = [];
				for(let i = 0; i < datas.length; i++) {
					if(data.fid == datas[i].fpid) {
						obj.children.push(this.getGoodsTreeChilds(datas, datas[i]));
					}
				}
				if(obj.children.length == 0) {
					delete obj.children
				}
				return obj;
			},
			//选择物资类型
			choseGoodsType(index) {
				if(index.length == 0) {
					return;
				}
				this.MgoodsTypeid=index[0].fid;
				this.getGoodsByType(this.MgoodsTypeid);
				this.MgoodsType = index[0].title
			},
			//根据类型查出型号
			getGoodsByType(param) {
				this.$http.get(this.url + 'Goods/select/byid/' + param).then(response => {
					let isOk = response.data;
					if(isOk.success) {
						this.types = isOk.obj
					} else {
						this.$Message.error(isOk.msg);
					}

				}, response => {

				});
			},
			//根据型号查详细
			getGoodsInfoByType(param) {
				this.MgoodsModel = param.fmodel;
				this.goodsTypeId = param.fid;
				this.getGoodsInfo();
			},
			getGoodsInfo() {
				let params = {
					fgoodsmodelid: this.goodsTypeId,
					pageCurrent: this.lists[0].current,
					pageSize: this.pageSize
				}
				this.$http.post(this.url + 'Goods/select/basic', params).then(response => {
					let isOk = response.data;
					if(isOk.success) {
						if(isOk.obj != null) {
							this.lists.totalsize = isOk.obj.itemTotal
							this.items = isOk.obj.items
						} else {
							this.lists.totalsize = this.lists.totalsize
							this.items = []
						}

					} else {
						this.$Message.error(isOk.msg);
					}

				}, response => {

				});
			},
			//分页
			changePage(page) {
				this.lists[0].current = page;
				this.getGoodsInfo();
			},

			//改变表格显示大小的时候
			changePageSize(pageSize) {
				this.pageSize = pageSize;
				this.getGoodsInfo();
			},

			getGoodId(select) {
				this.goodsId = select;
			},
			getGoodIds(select) {
				this.goodsId = select;
			},
			//删除物资
			deleteGoods() {
				let fno = [];
				for(var i = 0; i < this.goodsId.length; i++) {
					fno.push(this.goodsId[i].fid)
				}
				this.$http.post(this.url + 'Goods/delete/basic', fno).then(response => {
					let isOk = response.data;
					if(isOk.success) {
						console.log("------4545------")
						console.log(isOk.obj)
						this.getGoodsInfo();
						console.log("-------------")
						this.$Message.error(isOk.msg);
					} else {
						this.$Message.error(isOk.msg);
					}
				}, response => {});
			},
			addGoods() {
				let param = {
					fcondition: this.MgoodsCondition,
					fdepno: "01",
					//缺少id  现在只是拿到值到页面上
					fgoodsmodelid: this.goodsTypeId,
					fgoodstypeid: this.MgoodsTypeid,
					finstate: this.MgoodsState,
					flocation: this.MgoodsLocal,
					fname: this.MgoodsName,
					fno: this.MgoodsNo,
					fuserno:this.MgoodsUser,
				}
				this.$http.post(this.url + '/Goods/insert/basic', param).then(response => {
					let isOk = response.data;
					if(isOk.success) {
						console.log(isOk.obj)
						this.$Message.success(isOk.msg);
					} else {
						this.$Message.error(isOk.msg);
					}
				}, response => {});
			},
		},
		mounted: function() {
			this.getGoodsType()
		},
	}
</script>

<style>

</style>